<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1 {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            /* 居中 */
            text-align: center;
            /* 文本居中 */
            border: 2px solid #ccc;
        }

        .a1>div {
            display: inline-block;
            /* 行内元素转到行内块元素 */
            width: 20px;
            height: 20px;
            margin-right: 7px;
            margin-top: 10px;
            text-align: center;
            font: 8px/20px "Microsoft YaHei";
            background-color: #FED504;
        }

        .a1>div:nth-child(1) {
            width: 40px;
            height: 20px;
            margin-right: 7px;
            background-color: #FED504;
        }

        .a1>div:nth-child(11) {
            width: 40px;
            height: 20px;
            margin-right: 7px;
            background-color: #FED504;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div>上一页</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <span>...</span>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>下一页</div>
    </div>
</body>

</html>
